<template>
    <div>

     <x-header title="我的" style="position:fixed;left:0px;top:0px;z-index:1000;width:100%" :left-options="{showBack: false}" @on-click-more="show = false"></x-header> 
        <div class="imgBox">
            <img class="headImg" :src="userInfo.headimg" alt="">
            <div class="userIdiv">
              <div>
                <span class="usernameSpan">{{userInfo.nickName}}</span>

              </div>
                <div class="useracountmoneyDiv">账户余额：{{userInfo.acountmoney}}</div>
                <div class="userjifendiv"> <span>{{userInfo.jifen}}积分</span></div>
                <div class="userCoderImg" @click="myCoders(userInfo)"><img src="/static/cart/ewm.png" alt=""></div>
                
                <!-- <p></p> -->
            </div>


        <flexbox :gutter="0">
          <flexbox-item v-for="(item , i) in headList" :key="i" @click.native="goHeader(item)">
            <div class="flex-demo1">
              <img width="25" :src="item.iconUrl" alt="">{{item.title}}
            </div>
          </flexbox-item>
        </flexbox>


        </div>
        <!-- 新 -->
<!-- 我的订单 -->
      <div id="UserInfo">
      <div class="_item" style="margin-top:;">
         <group-title class="_title">我的订单 <p @click="dingdanQuery">查看全部订单&nbsp;》</p> </group-title>
       <grid class="grids">
          <grid-item v-for="(item,i) in myDingdan" :key="i"  @click.native="myOrder(item)" style="padding:10px 10px">
            <img slot="icon" v-bind:src="item.iconUrl">
            <p>{{item.title}}</p>
          </grid-item>
          
        </grid>
      </div>

  <group >
      <cell style="background:#ffffff;" @click.native="goJifen">
        <span slot="title" style=""><span style="vertical-align:middle;">{{'积分商城'}}</span></span>
      </cell>  </group>
  
      <div class="_item" style="">
          <grid class="grids" :cols="4">
            <grid-item v-for="(item,i) in myitems" :key="i"  @click.native="myEval(item)">
              <img slot="icon" v-bind:src="item.iconUrl">
              <p>{{item.title}}</p>
            </grid-item>
          </grid>
      </div>

<!-- 旧的 -->
      <!-- //////////////////////////////////// -->
      <!-- <div class="_item" style="margin-top:;">
         <group-title class="_title"><img class="images" src="static/bottom/zichan@2x.png" alt=""> 我的资产 <p>全部产品\充值&nbsp;></p> </group-title>
       <grid class="grids">
          <grid-item v-for="(item,i) in myMonery" :key="i"  @click.native="myEval(item)" style="padding:10px 10px">
            <img slot="icon" v-bind:src="item.iconUrl">
            <p>{{item.title}}</p>
          </grid-item>
          
        </grid>
      </div> -->
      <!--我的团队  -->
      <!-- <div class="_item">
         <group-title class="_title"><img class="images" src="static/bottom/tuandui@2x.png" alt=""> 我的团队 <p>查看返利下线&nbsp;></p> </group-title>
       <grid class="grids">
          <grid-item v-for="(item,i) in myTeam" :key="i" @click.native="goHui(item)" style="padding:10px 10px">
            <img slot="icon" :src="item.iconUrl">
            <p>{{item.title}}</p>
          </grid-item>
          
        </grid>
      </div> -->
      <!--评价、晒单 -->
      <!-- <div class="_item">
         <group-title class="_title"><img class="images" src="static/bottom/shaidan@2x.png" alt=""> 评价\晒单 <p>查看评价下单&nbsp;></p> </group-title>
       <grid class="grids">
          <grid-item v-for="(item,i) in myAssess" :key="i" style="padding:10px 10px;border-right:0px" @click.native="myEval(item)">
            <img slot="icon" :src="item.iconUrl">
            <p>{{item.title}}</p>
          </grid-item>
          
        </grid>
      </div> -->



      <!--测试用的 -->
      <!-- <div class="_item">
         <group-title class="_title"><img class="images" src="static/bottom/shaidan@2x.png" alt=""> 测试用的 <p>测试用的</p> </group-title>
       <grid class="grids">
          <grid-item v-for="(item , i) in myTestData" :key="i" @click.native="myCeShi(item)" style="padding:10px 10px;border-right:0px">
            <img slot="icon" src="static/bottom/youhaodu@2x.png">
            <p>{{item.title}}</p>
          </grid-item>
          
        </grid>
      </div> -->
    </div>
    <!-- 红包弹框 -->
     <div v-transfer-dom>
      <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '40%', 'background-color': 'transparent'}">
        <p style="color:#fff;text-align:center;" @click="showDialogStyle = false">
          <div class="lingqu" @click="go_ling">立即领取</div>
          <span>
          <img src="static/cart/hongbao.png" style="max-width:60%">            
          </span>
          <br>
          <br>
          <x-icon type="ios-close-outline" style="fill:#fff;">
            <span class="vux-close"><img src="static/cart/i_ico_del.png" alt=""></span>
          </x-icon>
        </p>
      </x-dialog>
    </div>
    </div>
</template>

<script>
import {
  Grid,
  Cell,
  Group,
  GridItem,
  GroupTitle,
  XHeader,
  XDialog,
  Flexbox,
  FlexboxItem,
  Badge,
  TransferDomDirective as TransferDom
} from "vux";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";
export default {
  directives: {
    TransferDom
  },
  components: {
    Grid,
    Cell,
    GridItem,
    GroupTitle,
    XHeader,
    XDialog,
    Flexbox,
    FlexboxItem,
    Group,
    Badge
  },
  methods: {
    goHeader: function(item) {
      this.$router.push({ path: item.routePath,params: { userInfo:this.userInfo }});
    },
    dingdanQuery(){
      this.$router.push({ name:"my_order",params:{index:0} });      
    },
    myOrder(item){
       this.$router.push({
        name: item.routePath,
        params: {
          // userInfos:this.userInfo,
          index:item.index
        }
      })
    },
    myEval(item) {
    

      console.log(item)
      if(item.title=="扫一扫"){
        // 扫一扫
        this.scanCode()
      }else{
      this.$router.push({
        name: item.routePath,
        params: {
          userInfos:this.userInfo,
        }
      })
      }
    },
    // 二维码
    userCode(code){
      return homeUrl()+code
    },
    // 我的二维码
    myCoders(userInfo){
    this.$router.push({
        name: "myCoder",
        params: {
          users: userInfo
        }
      });
    },
    userInfoUpdata() {
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs"
        // wxid: this.wxOpenId
        
      });
      axios
        .post(homeUrl() + "getUserInfoByWxid/", datas, { emulateJSON: false })
        .then(
          result => {
            
            if (result.data.status == "ok") {
              this.userInfo = result.data.data;
              console.log(result.data.data);
               var users=JSON.stringify(result.data.data);
              localStorage.setItem("personalInfo",users)
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 积分商城
    goJifen(){
      // console.log("jodehfd")
        //  localStorage.setItem("fromPosition" , "jifen")
      this.$router.push({ path:"jifenExchange"});
    },
    // 扫一扫
    scanCode(){
//引入微信jssdk
var wx = require('weixin-js-sdk'); //引入sdk
$.get(
      "http://www.dangsh.top/wxjssdk/", {url: location.href.split('#')[0]
} , 
      function(data){
        alert(JSON.stringify(data))
        console.log("拿到结果了")
        console.log(data)
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "wx619c085e365678c4", // 必填，公众号的唯一标识
          timestamp: data.timestamp + "", // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名，见附录1
          jsApiList: ['chooseImage' , 'onMenuShareAppMessage' , 'onMenuShareTimeline' , 'startRecord' , 'stopRecord' , 'playVoice','scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });


        wx.ready(function () {
            alert("开始ready")
           wx.scanQRCode({  
                  needResult : 1,  
                  scanType : [ "qrCode", "barCode" ],  
                  success : function(res) { 
                    alert("我要扫码了") 
                      // console.log(res)  
                      // alert(JSON.stringify(res));  
                      // var result = res.resultStr;  
                  },  
                  fail : function(res) {  
                      console.log(res)  
                      alert(JSON.stringify(res));  
        
                  }  
              });  
        })
          
        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          alert(JSON.stringify(res))
        })

      } 
      
);
    },
    // 添加用户信息并判断是否为第一次登陆
    addUserInfo() {
    alert(localStorage.getItem("userInfos"))
    alert(JSON.parse(localStorage.getItem("userInfos")));
    var severUser=JSON.parse(localStorage.getItem("userInfos"));
      alert(severUser.nickname)
      var userDataInfo = {};
      userDataInfo.userName = severUser.nickname;
      userDataInfo.headimg = severUser.headingurl;
      userDataInfo.wxid = severUser.openid;
      userDataInfo.country = severUser.country;
      userDataInfo.city = severUser.city;
      userDataInfo.gender = severUser.sex;
      userDataInfo.province = severUser.province;
      userDataInfo.privilege = severUser.groupid;
      alert(JSON.stringify(userDataInfo))
      var datas = qs.stringify({
        userData: JSON.stringify(userDataInfo)
      });
      axios
        .post(homeUrl() + "userManageJsonAdd/", datas, { emulateJSON: true })
        .then(
          result => {
            console.log("添加用户1");
            console.log(result);
            // 用户添加成功之后，判断用户是否为第一次登陆；如果为首次登陆需要送红包;
            if (result.data.status == "ok") {
              this.showDialogStyle = true;
            } else {
              console.log("用户已经存在");
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 用户第一次进来
    isFirstReg(){
      var isFirst=this.wxUserInfo.is_first_register;
      if(isFirst==true){
              this.showDialogStyle = true;        
      }else{
              console.log("用户已经存在");        
      }
    },
    // 领取红包
    go_ling() {
      console.log("领取红包");
      this.showDialogStyle=false;
      this.addJiFen();
      this.addRedPackets()
    },
    addJiFen(){
          var datas = qs.stringify({
        wxid: this.wxOpenId,
        optionName: JSON.stringify(["acountmoney","rebate","buyMoney"]),
        optionNumber: "[3,50,10]"
      });
      axios
        .post(homeUrl() + "addUserSomeNumber/", datas, { emulateJSON: false })
        .then(
          result => {
            console.log(result);

            //    if(result.data.status=="ok"){
            //    }
          // this.userInfoUpdata();
            
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 添加红包
    addRedPackets(){
      console.log(this.getNowFormatDate())
     
         var datas = qs.stringify({
        wxid:this.wxOpenId,
        getpath: "注册送红包",
        money: "50",
        title:"首次登录送红包",
        description:"用户首次登录送50元红包",
        starttime:"",
        endtime:this.getNowFormatDate(),
        detail:"用户首次登录送50元红包"
      });
      axios
        .post(homeUrl() + "redpackAdd/", datas, { emulateJSON: false })
        .then(
          result => {
            console.log(result);
            //    if(result.data.status=="ok"){
            //    }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 获取日期
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
    onItemClick() {
      console.log("on item click");
    },
    goHui: function(item) {
      // console.log(index)
      this.$router.push({ path: item.routePath,params: { userInfo:this.userInfo } });

      // if(index==1){
      //   this.$router.push({name: 'myRecommend', params: {}})
      // }
      //  if(index==2){
      //   this.$router.push({name: 'vip_manage', params: {}})
      // }
      //  if(index==3){
      //   this.$router.push({name: 'myCollection', params: {}})
      // }
    }
  },
  created() {

     this.userInfoUpdata();
     this.isFirstReg()
  // var openid = localStorage.getItem("openid")
  // alert(openid)
  },
  data() {
    return {
      wxOpenId:localStorage.getItem("openid"),
      wxUserInfo:JSON.parse(localStorage.getItem("userInfos")),
      userInfo:"",
      showDialogStyle: false,
      headList:[
        {
          title: "红包",
          routePath: "redPackets",
          iconUrl: "static/bottom/youhaodu@2x.png"
        }, {
          title: "收藏",
          routePath: "myCollection",
          iconUrl: "static/bottom/shoucang1.png"
        }, {
          title: "足迹",
          routePath: "myHistory",
          iconUrl: "static/bottom/zuji.png"
        },
      ],
      myDingdan: [
        {
          title: "待付款",
          routePath: "my_order",
          iconUrl: "static/bottom/daifu.png",
          index:1
        },
        {
          title: "待发货",
          routePath: "my_order",
          iconUrl: "static/bottom/daifa.png",
          index:2
        },
        {
          title: "待收货",
          routePath: "my_order",
          iconUrl: "static/bottom/daishou.png",
          index:3
        },
        {
          title: "待评价",
          routePath: "my_order",
          iconUrl: "static/bottom/daipingjia.png",
          index:4
        }
      ],
      myitems: [
        {
          title: "钱包",
          routePath: "qianbao",
          iconUrl: "static/bottom/钱包.png"
        },
        {
          title: "优惠券",
          routePath: "backMoney",
          iconUrl: "static/bottom/优惠券.png"
        },
        {
          title: "积分",
          routePath: "myJiFen",
          iconUrl: "static/bottom/积分.png"
        },
        {
          title: "返利",
          routePath: "backMoney",
          iconUrl: "static/bottom/返利.png"
        },
                {
          title: "团队",
          routePath: "vip_manage",
          iconUrl: "static/bottom/团队.png"
        },
                {
          title: "签到",
          routePath: "mySigned",
          iconUrl: "static/bottom/youhaodu@2x.png"
        },
                {
          title: "推荐",
          routePath: "myRecommend",
          iconUrl: "static/bottom/推荐.png"
        },
                {
          title: "扫一扫",
          routePath: "backMoney",
          iconUrl: "static/bottom/二维码.png"
        },
                {
          title: "评价",
          routePath: "myeval",
          iconUrl: "static/bottom/评价.png"
        },
                {
          title: "地址",
          routePath: "goods_address",
          iconUrl: "static/bottom/地址.png"
        },
         {
          title: "留言",
          routePath: "liuyan",
          iconUrl: "static/bottom/shoucang1.png"
        },
         {
          title: "购买记录",
          routePath: "myBuyHistory",
          iconUrl: "static/bottom/zuji.png"
        },
         {
          title: "分享记录",
          routePath: "myShare",
          iconUrl: "static/bottom/zuji.png"
        },
      ],
      myMonery: [
        {
          title: "红包",
          routePath: "redPackets",
          iconUrl: "static/bottom/hongbao@2x.png"
        },
        {
          title: "积分商城",
          routePath: "jifenExchange",
          iconUrl: "static/bottom/chongzhi@2x.png"
        },
        {
          title: "充值",
          routePath: "myHistory",
          iconUrl: "static/bottom/tixian@2x.png"
        },
        {
          title: "储值卡",
          routePath: "backMoney",
          iconUrl: "static/bottom/chongzhi@2x.png"
        }
      ],
      myTeam: [
        {
          title: "我的团队",
          routePath: "vip_manage",
          iconUrl: "static/bottom/wodetuandui@2x.png"
        },
        {
          title: "我的返利",
          routePath: "backMoney",
          iconUrl: "static/bottom/fanli@2x.png"
        },
        {
          title: "我的推荐",
          routePath: "myRecommend",
          iconUrl: "static/bottom/tuijian@2x.png"
        },
        {
          title: "我的二维码",
          routePath: "myHistory",
          iconUrl: "static/bottom/erweima@2x.png"
        }
      ],
      myAssess: [
        {
          title: "我的评价",
          routePath: "myeval",
          iconUrl: "static/bottom/pingjia@2x.png"
        },
        {
          title: "我的收藏",
          routePath: "myCollection",
          iconUrl: "static/bottom/youhaodu@2x.png"
        },
        {
          title: "我的地址",
          routePath: "/goods/goods_address",
          iconUrl: "static/bottom/dizhi@2x.png"
        },
        {
          title: "我的留言",
          routePath: "myHistory",
          iconUrl: "static/bottom/shoucang1.png"
        }
      ],
      myTestData: [
        {
          title: "浏览记录",
          routePath: "myHistory"
        },
        {
          title: "我的关注",
          routePath: "myFocus"
        },
        {
          title: "消费记录",
          routePath: "myBuyHistory"
        },
        {
          title: "我的订单",
          // routePath: 'myOrder'
          routePath: "my_order"
        }
      ]
    };
  }
};
</script>

<style>
/* 如果把下面的打开的话
 * 会有bug
 * bug复现流程:
 * 1. 进入任一界面(除了"我的"界面),并注意观察该界面的样式
 * 2. 点击进入"我的"界面
 * 3.再回到第一步的界面中(会发现该界面的样式被修改了)
 */
/** {
    font-size: 12px!important;
}*/
.imgBox {
  width: 100%;
  height: rem;
  margin-top: 46px;
  padding-top: 0.5rem;
  /* background: rgb(153, 51, 73); */
  background: linear-gradient(
    to right,
    rgb(241, 238, 231),
    rgb(236, 130, 174)
  ); /* 标准的语法（必须放在最后） */
  /* text-align: center; */
  color: #ffffff;
}
.userIdiv{
  float: left;
  margin-top: 1rem;
  margin-left: 1.5rem;
}
.imgBox .headImg {
  float: left;
  width: 4rem;
  margin-top: 1rem;
  margin-left: 1rem;
  display: inline-block;
}
.usernameSpan{
  font-size: 18px;
  color: #333333
}
.userjifendiv{
  border-radius: 10px;
  /* width: 5rem; */
  text-align: center;
  display: block;
  background: gold;
  margin-left: 1rem;
  padding: 1px;
  float: left;
}
.userjifendiv span{
  display: inline-block;
  margin: 0px 0.5rem;
}
.userCoderImg{
  text-align: center;
  display: block;
  margin-left: 2rem;
  float: left;
  margin-top: -20px
}
.userCoderImg img{
width: 50px;
height: 50px;
}
.useracountmoneyDiv{
  float: left;

}
#UserInfo {
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 4.375rem;
}
#UserInfo ._title {
  color: #000000;
}
.images {
  width: 1.25rem;
  height: 1.125rem;
  vertical-align: middle;
  margin-right: 0.3125rem;
}
.grid-center {
  display: block;
  text-align: center;
  color: #000000;
}
._item {
  margin-top: 0.9375rem;
  background: #fff;
  border-radius: 5px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 0.75rem;
}
._title {
  height: 1.875rem;
  line-height: 1.875rem;
  font-size: 12px;
  color: #333333;
  padding-top: 0.3125rem;
}
._title p {
  float: right;
  font-size: 12px;
  color: #666666;
}
.grids {
  text-align: center;
  padding: 0 0.625rem;
}
.grids p {
  color: #666666;
  line-height: 1.875rem;
  margin-top: 0.625rem;
}
.weui-grid:before {
  border-right: 0px;
}
*/ .weui-cell {
  padding: 5px 15px !important;
}
.weui-cells__title {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.weui-grid:before {
  border-right: 0px solid #ffffff !important;
}
.weui-grid:after {
  border-bottom: 0px solid #ffffff !important;
}
.weui-grids:after {
  border-left: 0px solid #ffffff !important;
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
.lingqu {
  position: absolute;
  color: #666;
  line-height: 25px;
  font-size: 12px;
  width: 80px;
  height: 1.875rem;
  background: #f5c82a;
  border-radius: 20px;
  left: 43%;
  top: 38%;
}
.flex-demo1 {
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: 1rem;
  color: #fff;
  background-clip: padding-box;
}
.flex-demo1 img {
  vertical-align: middle;
}


</style>
